import {View, Text} from "@tarojs/components";
import http from "@/request";
import {useEffect, useState} from "react";
import {messageType} from "@/pages/message/type";
import { VolumeOutlined } from "@taroify/icons"
import {ToPage} from "@/utils";
import {NoticeBar} from "@taroify/core";
import "./index.scss"

const Message: React.FC = () => {
    const [messages, setMessages] = useState<messageType[]>([]);
    const getList = () => {
        http.post('/disp/biz/message/page', {
            pageNum: 1,
            pageSize: 10,
        }).then((res) => {
            setMessages(res.data.list);
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (<View className="info-card">
        <View className="info-card-item flex-column">
            <NoticeBar wordwrap scrollable={false}>
                <View style={{width: '88vw'}}>
                    <NoticeBar.Icon>
                        <VolumeOutlined />
                    </NoticeBar.Icon>
                    {
                        messages.slice(5).map((item) => (
                            <View key={item.id} className={'message-item flex-row flex-item'}>
                                <View className={'flex1'}>{item.msgContent}</View>
                            </View>
                        ))
                    }
                </View>
                <View className="flex-row">
                    <View className="flex1"></View>
                    <View className="show-more" onClick={() => ToPage('/pages/message/index')}>
                        <Text>查看更多</Text>
                        <Text className="iconfont icon-base-right"></Text>
                    </View>
                </View>
            </NoticeBar>
        </View>
    </View>)
}

export default Message